react

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.

If you want to use .svg files natively – try react-native-vector-image.

If you find the library useful, please consider sponsoring. Things I have planned is to split up the repo into a monorepo, that would enable individual versioning of icon sets, better performance, smaller bundle and easier for the community to publish their own.

Browse all.

If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:

In your XCode Settings, in the Build Phases tab, under Copy Bundle Resources add the fonts you have copied in the Fonts directory.

When using auto linking, it will automatically add all fonts to the Build Phases, Copy Pods Resources. Which will end up in your bundle. To avoid that, create a react-native.config.js file at the root of your react-native project with:

Note: you need to recompile your project after adding new fonts.

This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

To customize the files being copied, add the following instead:

you will need to update the paths to:

⚠️ There have been reported issues when using RNVI < 9.0.0 in a monorepo, so make sure you are on 9+.

These steps are optional and only needed if you want to use the Icon.getImageSource function.

Edit android/settings.gradle to look like this (without the +):

Edit android/app/build.gradle (note: app folder) to look like this:

Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):

Note: this is optional step, it's necessary only and only if your react-native app doesn't support auto-linking otherwise you can ignore this.

Note: you need to recompile your project after adding new fonts, also ensure that the Fonts folder also appear under Copy Bundle Resources in Build Phases.

Note: you need to recompile your project after adding new fonts.

In your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader)

Then consume those files in your JavaScript entry point to get the bundled url and inject a style tag in your page:

Upgrading this package often requires the font files linked to your projects to be updated as well. If the automatic linking works for you, running this again should update the fonts. Otherwise you need to follow the steps outlined in the installation section.

You can either use one of the bundled icons above or roll your own custom font.

Any Text property and the following:

Since Icon builds on top of the Text component, most style properties will work as expected, you might find it useful to play around with these:

NOTE: On android Text doesn't currently support border* styles, to circumvent this simply wrap your Icon with a View.

By combining some of these you can create for example :

A convenience component for creating buttons with an icon on the left side.

Any Text, TouchableHighlight or TouchableWithoutFeedback property in addition to these:

Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size and color as described above.

Alternatively you may use the synchronous method Icon.getImageSourceSync to avoid rendering glitches. Keep in mind that this method is blocking and might incur performance penalties. Subsequent calls will use cache however.

Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard Icon component:

All static methods from Icon is supported by multi-styled fonts.

If no style argument is passed (or if it's invalid) the methods will default to a pre-defineds fallback.

Icon.Button is supported, usage is just like Icon:

Returns your own custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or it's character code. fontFamily is the name of the font NOT the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third fontFile argument for android support, it should be the custom font file name.

Convenience method to create a custom font based on a fontello config file. Don't forget to import the font as described above and drop the config.json somewhere convenient in your project.

Make sure you're using the Download option in IcoMoon, and use the .json file that's included in the .zip you've downloaded. You'll also need to import the .ttf font file into your project, following the instructions above.

You have to manually make a reference of your .ttf on your xcodeproj Resources folder and in Info.plist.

React Native comes with an amazing animation library called Animated. To use it with an icon, simply create an animated component with this line: const AnimatedIcon = Animated.createAnimatedComponent(Icon). You can also use the higher level animation library react-native-animatable.

Try the IconExplorer project in Examples/IconExplorer folder, there you can also search for any icon.

Since TabBarIOS was removed from core in favor of @react-navigation/bottom-tabs, it is also removed as a convenience component from this library. Simply use the Icon instead, but don't forget to import and link to this project as described above first.

Below is an example taken from react-navigation:

Since ToolbarAndroid was removed from core, it is also removed as a convenience component from this library. Simply use getImageSourceSync instead, but don't forget to import and link to this project as described above first.

If you already have an icon font with associated CSS file then you can easily generate a icon set with the generate-icon script.

Any flags not listed below, like --componentName and --fontFamily, will be passed on to the template.

CSS selector prefix [default: ".icon-"]

Template in JS template string format [default: "./template/iconSet.tpl"]

For default template please provide --componentName and --fontFamily.

Save output to file, defaults to STDOUT

Both npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including Execution failed for task ':react-native-vector-icons:processReleaseResources'. So try to keep the path to your project folder as short as possible.

You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the gradle approach.

Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a custom font.

This project is licenced under the MIT License.

Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.